<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0
		}

		body {
			background: #000;
		}

		#canvas {
			position: absolute;
			-webkit-filter: url("#liquid");
			filter: url("#liquid");
		}
	</style>
	<body>
		<script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
		<canvas id="canvas"></canvas>
		<svg xmlns="https://www.w3.org/2000/svg" version="1.1">
			<defs>
				<filter id="liquid">
					<!--important code -->
					<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
					<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 60 -9" />
				</filter>
			</defs>
		</svg>
	</body>
	<script type="text/javascript">
		const canvas = document.getElementById("canvas"),
			context = canvas.getContext("2d"),
			colorPallete = ["#00f", "#00a", "#00b", "#00c", "#00d", "#00e"];
		// ["#f00","#a00","#b00","#c00","#d00","#e00"];
		// ["white","#888","yellow","orange","darkorange","darkmagenta","darkgreen","khaki"];


		var width = canvas.width = window.innerWidth,
			height = canvas.height = window.innerHeight,
			src = {
				x: width / 2,
				y: height / 2
			},
			balls = [];

		window.onresize = () => {
			width = canvas.width = window.innerWidth;
			height = canvas.height = window.innerHeight;
		}

		class Ball {
			constructor() {
				this.x = src.x;
				this.y = src.y;
				this.angle = Math.PI * 2 * Math.random();
				this.vx = (1.3 + Math.random() * .3) * Math.cos(this.angle);
				this.vy = (1.3 + Math.random() * .3) * Math.sin(this.angle);

				// this.xr = 6 + 10 * Math.random();
				// this.yr = 2 + 10 * Math.random();
				this.r = 6 + 10 * Math.random()

				this.color = colorPallete[Math.floor(Math.random() * colorPallete.length)];
			}

			update() {
				this.x += this.vx;
				this.y += this.vy;


				// this.xr-= .01;
				// this.yr -= .01;
				// this.r=Math.min(this.yr,this.xr);
				this.r -= .01;

			}
		}


		function removeBall() {
			for (var i = 0; i < balls.length; i++) {
				var b = balls[i];
				if (
					b.x + b.r < 0 ||
					b.x - b.r > width ||
					b.y + b.r < 0 ||
					b.y - b.r > height ||
					b.r < 0
				) {
					balls.splice(i, 1);
				}
			}
		}

		function renderBall() {
			context.clearRect(0, 0, width, height);

			if (Math.random() > .5)
				balls.push(new Ball());

			for (var i = 0; i < balls.length; i++) {
				var b = balls[i];
				context.fillStyle = b.color;
				context.beginPath();

				context.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
				// context.ellipse(b.x, b.y, b.xr, b.yr, b.angle, 0, 2 * Math.PI);

				context.fill();
				b.update();
			}

			removeBall();
			requestAnimationFrame(renderBall);
		}

		renderBall();



		// http://codepen.io/mnmxmx/pen/VjjvEq
	</script>
</html>
